<template>
  <div class="team-data-config">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">团队数据配置</h2>
      <p class="page-description">配置团队数据展示相关设置</p>
    </div>

    <!-- 配置表单卡片 -->
    <div class="config-card">
      <div class="card-header">
        <h3 class="card-title">数据设置</h3>
      </div>
      <div class="card-content">
        <el-form
          ref="formref"
          size="default"
          :rules="rules"
          :model="form"
          label-width="140px"
          :form="form"
          label-position="right"
          class="config-form"
        >
          <el-form-item label="学校数据标题" prop="type" class="form-item">
            <el-input
              v-model="form.other!.datatitle"
              :maxlength="15"
              clearable
              placeholder="请输入数据标题"
              class="title-input"
            >
              <template #prefix>
                <el-icon><Document /></el-icon>
              </template>
            </el-input>
            <div class="input-tip">最多15个字符</div>
          </el-form-item>
          
          <el-form-item class="button-group">
            <el-button 
              type="info" 
              size="default" 
              @click="start"
              :loading="loading"
              class="refresh-btn"
            >
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
            <el-button 
              type="primary" 
              size="default" 
              @click="submit"
              :loading="saving"
              class="save-btn"
            >
              <el-icon><Check /></el-icon>
              保存配置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 快捷操作卡片 -->
    <div class="action-card">
      <div class="card-header">
        <h3 class="card-title">快捷操作</h3>
      </div>
      <div class="card-content">
        <div class="action-item">
          <div class="action-info">
            <el-icon class="action-icon"><TrendCharts /></el-icon>
            <div class="action-text">
              <h4>查看团队数据</h4>
              <p>查看团队的详细数据统计和图表分析</p>
            </div>
          </div>
          <el-button 
            type="primary" 
            plain
            @click="openTeamData"
            class="action-btn"
          >
            查看数据
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElForm, ElMessage, UploadUserFile } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncgetteam, asyncteamchangeteam } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { Team } from "../data";
import { teamrules } from "../data/formrules";

const store = useStore(Storekey);
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const teamId = computed(() => {
  return user.value?.teamid;
});

const data = reactive(Object.assign({}, Team));
const isAdmin = computed(() => {
  if (!user.value) return 0;
  if (data?.userid === user.value.ID) return 1;
  const a = data?.teamuser?.find((v) => v.userid === user.value.ID);
  if (a) {
    return a.isAdmin;
  }
  if (user.value.remarks === "销售助教") return 1;
  return 0;
});

const form = reactive(Object.assign({}, Team));
const formref = ref<typeof ElForm>();
const rules = teamrules;
const router = useRouter();

// 添加加载状态
const loading = ref(false);
const saving = ref(false);

onMounted(() => {
  if (!isAdmin) {
    ElMessage.error("没有权限");
    router.push("/");
  }
  start();
});

async function start() {
  loading.value = true;
  try {
    const d = await asyncgetteam({ ID: teamId.value });
    Object.assign(data, d);
    Object.assign(
      form,
      d,
      // 默认
      {
        info: d.info ? d.info : `欢迎来到${d.name}`,
        other: d.other ? d.other : {},
      }
    );
    // 默认banner
    fileList.value = form?.other?.banner || [
      {
        name: "banner01.png",
        url: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/saas-banner.png",
      },
    ];
  } catch (error) {
    ElMessage.error("加载数据失败");
  } finally {
    loading.value = false;
  }
}

async function submit() {
  saving.value = true;
  try {
    form.other = {
      ...form.other,
      banner: fileList.value.map((e) => ({ name: e.name, url: e.url })),
      // saasTeamLogo: saasTeamLogoFileList.value[0]?.url
    };
    if (isAdmin.value && data?.ID) {
      Object.assign(form, { teamid: data.ID });
      await asyncteamchangeteam(form);
      ElMessage.success("保存成功!");
      start();
    } else {
      ElMessage.error("你不是管理员无法更改!");
    }
  } catch (error) {
    ElMessage.error("保存失败，请重试");
  } finally {
    saving.value = false;
  }
}

// 打开团队数据页面
function openTeamData() {
  const url = `teamchart?teamid=${user.value?.teamid}`;
  window.open(url, '_blank');
}

const fileList = ref<UploadUserFile[]>([]);
</script>

<style scoped>
.team-data-config {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.page-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 卡片样式 */
.config-card,
.action-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.config-card:hover,
.action-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 20px 24px 0;
  border-bottom: 1px solid #f3f4f6;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 20px 0;
}

.card-content {
  padding: 24px;
}

/* 表单样式 */
.config-form {
  max-width: 600px;
}

.form-item {
  margin-bottom: 24px;
}

.title-input {
  width: 100%;
}

.input-tip {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* 按钮组 */
.button-group {
  margin-top: 32px;
  margin-bottom: 0;
}

.refresh-btn {
  margin-right: 12px;
  border-radius: 8px;
  padding: 8px 20px;
}

.save-btn {
  border-radius: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.save-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 快捷操作卡片 */
.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.action-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.action-icon {
  font-size: 24px;
  color: #3b82f6;
  margin-right: 16px;
}

.action-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.action-text p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.action-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .team-data-config {
    padding: 16px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .config-form {
    max-width: 100%;
  }
  
  .action-item {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .action-info {
    justify-content: center;
    text-align: center;
  }
  
  .action-btn {
    width: 100%;
  }
}

/* Element Plus 组件自定义样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #374151;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

:deep(.el-button) {
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-1px);
}
</style>
